import React, {Component} from 'react'
import {connect} from 'react-redux'
import {CSSTransition} from 'react-transition-group'
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  Navsearch,
  Addtion,
  Button,
  SearchWrapper,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoItem,
  SearchInfoList
} from "./style";
import {GlobalStyle} from "../../static/iconfont/iconfont";
import * as actionCreaters from "./store/actionCreater"
import {Link} from "react-router-dom"
import {actionCreater as actionCreaterLogin} from "../../pages/login/store"

class Header extends Component {

  getListArea(show) {
    const {list, page, handleMouseEnter, handleMouseLeave, mouseIn, handleChangePage, totalPage} = this.props
    const jsList = list.toJS();
    const pageList = [];
    if (jsList.length) {
      for (let i = (page * 10); i < (page + 1) * 10; i++) {
        pageList.push(
          <SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>
        )
      }
    }

    if (show || mouseIn) {
      return (
        <SearchInfo onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch onClick={() => {
              handleChangePage(page, totalPage, this.iconspin)
            }}>
              <i className='iconfont spin' ref={(icon) => {
                this.iconspin = icon
              }}>&#xe851;</i>
              换一批
            </SearchInfoSwitch>
          </SearchInfoTitle>
          <SearchInfoList>
            {pageList}
          </SearchInfoList>
        </SearchInfo>
      )
    } else {
      return null;
    }
  }

  render() {
    const {focused, handleInputFocus, handleInputBlur, list, login, logout} = this.props
    return (
      <HeaderWrapper>
        <GlobalStyle/>
        <Link to="/"><Logo/></Link>
        <Nav>
          <Link to="/">
            <NavItem className='left active'>首页</NavItem>
          </Link>
          <NavItem className='left'>下载App</NavItem>
          {
            login ?
              <NavItem className='right' onClick={logout}>退出</NavItem> :
              <Link to="/login"><NavItem className='right'>登陆</NavItem></Link>
          }

          <NavItem className='right'><i className='iconfont'>&#xe636;</i></NavItem>

          <SearchWrapper>
            <CSSTransition
              timeout={200}
              in={focused}
              classNames="slide"
            >
              <Navsearch
                className={focused ? 'focused' : ''}
                onFocus={() => {
                  handleInputFocus(list)
                }}
                onBlur={handleInputBlur}
              />
            </CSSTransition>
            <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe635;</i>
            {this.getListArea(focused)}
          </SearchWrapper>
        </Nav>

        <Addtion>
          <Link to="/write">
            <Button className='writing'>
              <i className='iconfont'>&#xe615;</i>
              写文章
            </Button>
          </Link>
          <Button className='reg'>
            注册
          </Button>
        </Addtion>
      </HeaderWrapper>
    )
  }
}

const MapStateToProps = (state) => {
  return {
    focused: state.getIn(['header', "focused"]),
    list: state.getIn(["header", "list"]),
    page: state.getIn(['header', "page"]),
    totalPage: state.getIn(["header", "totalPage"]),
    mouseIn: state.getIn(["header", "mouseIn"]),
    login: state.getIn(["login", "login"])
  }
}

const MapDispatchToProps = (dispatch) => {
  return {
    handleInputFocus(list) {
      (list.size === 0) && dispatch(actionCreaters.getList());
      dispatch(actionCreaters.searchFocus())
    },
    handleInputBlur() {
      dispatch(actionCreaters.seachBlur());
    },
    handleMouseEnter() {
      dispatch(actionCreaters.changeMouse());
    },
    handleMouseLeave() {
      dispatch(actionCreaters.mouseLeave());
    },
    handleChangePage(page, totalPage, spin) {
      let originAngle = spin.style.transform.replace(/[^0-9]/gi, "");

      if (originAngle) {
        originAngle = parseInt(originAngle, 10);
      } else {
        originAngle = 0;
      }

      spin.style.transform = `rotate(${originAngle + 360}deg)`;

      if ((page + 1) >= totalPage) {
        page = 0;
        dispatch(actionCreaters.changePage(page));
      } else {
        page++;
        dispatch(actionCreaters.changePage(page));
      }
    },
    logout() {
      dispatch(actionCreaterLogin.logout())
    }
  }
}

export default connect(MapStateToProps, MapDispatchToProps)(Header);
